<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/NK_System/css/default.css">
    <link rel="stylesheet" href="/NK_System/css/global.css"/>
    <link rel="stylesheet" href="/NK_System/css/Logo.css"/>
    <link rel="stylesheet" href="//static.nowcoder.com/nowcoder/1.2.2046/stylesheets/v2lib/global/global.ui.css">
    <link rel="stylesheet" href="//static.nowcoder.com/nowcoder/1.2.2046/stylesheets/v2lib/channel/default.css">
    <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
    <title>题库</title>
</head>
<body>
 <header class="bg-dark sticky-top" style="width: auto" id="app1">
     <div class="container" style="width: 1200px!important;height: 76px!important;">
        <!-- 导航 -->
        <nav class="navbar navbar-expand-lg navbar-dark" style="width: auto!important;display: flow!important;">
            <!-- logo -->
            <!--					<a class="navbar-brand" href="#"></a>-->

            <div class="my"><a class="my"  href="#"></a></div>
            <!--					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">-->
            <!--						<span class="navbar-toggler-icon"></span>-->
            <!--					</button>-->
            <!-- 功能 -->
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto" style="width: auto!important;">
                    <li class="nav-item ml-3 btn-group-vertical">
                        <a class="nav-link" href="/NK_System/index">首页</a>
                    </li>
                    <li class="nav-item ml-3 btn-group-vertical">
                        <a class="nav-link position-relative"  href="/NK_System/study.html">题库</a>
                    </li>

                    <li class="nav-item ml-3 btn-group-vertical">
                        <a class="nav-link position-relative"  href="../templates/site/letter.html">学习博客<span class="badge badge-danger">12</span></a>
                    </li>

                </ul>
                <li class="nav-item ml-3 btn-group-vertical">
                    <a class="nav-link position-relative" style="color: rgba(255,255,255,.5)" href="/NK_System/letter/list">消息<span class="badge badge-danger"></span></a>
                </li>

                <li class="nav-item ml-3 btn-group-vertical dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img v-bind:src="user1.headerUrl"  class="rounded-circle" style="width:30px; color:rgba(255,255,255,.5)"/>
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown" >
                        <a class="dropdown-item text-center" href="../templates/site/profile.html">个人主页</a>
                        <a class="dropdown-item text-center" href="/NK_System/user/setting">账号设置</a>
                        <a class="dropdown-item text-center" href="/NK_System/quit">退出登录</a>
                        <div class="dropdown-divider"></div>
                        <span class="dropdown-item text-center text-secondary">{{user1.username}}</span>
                    </div>
                </li>

            </div>
        </nav>
    </div>
 </header>

<!--    padding 是内边距，可以使元素紧密排列-->

<div class="mm-div" style="padding-top: 10px!important;position: relative">
    <!--components-->
    <section class="Mycomponents" id="app">
        <!-- 表示题目列表页 -->
        <div class="table-list" v-show="status=='list'">
            <div class="mt-3 mb-5">
                <h2 style="color: white">题目列表</h2>
                <table>
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>标题</th>
                        <th>难度</th>
                    </tr>
                    </thead>
                    <tbody>
<!--                    th:each="map:${discussposts}" v-for="problem in problems"-->
                     <tr v-for="problem in problems" v-on:click="getProblem(problem.id)">
                             <td class="my_td" >{{problem.id}}</td>
                             <td class="my_td" >{{problem.title}}</td>
                             <td  class="my_td">{{problem.level}}</td>
                     </tr>
                    </tbody>
                </table>
                <div>
                    <button class="upPage"    v-on:click="getProblemsUp()" style="margin-left:350px">上一页</button>
                    <button class="downPage"  v-on:click="getProblemsDown()" style="margin-left: 200px">下一页</button>
                </div>
            </div>
        </div>
        <!-- 表示题目详情页 -->
        <!-- 两个页面都在一个 html 中, 通过一些简单的技巧来完成显示上的切换 -->
        <div class="detail—list" v-show="status=='detail'">
            <div class="My-col-sm-12">
                <div class="MyProble">
                    <!-- 放置题目的标题和难度 -->
                    <div class="idproblem"> <h2>{{problem.id}}.{{problem.title}}.{{problem.level}}</h2></div>
                    <!-- 用来显示一个文本的原始内容 -->
                    <!-- 在 pre 标签内部来放置题目的要求 -->
                    <pre class="mypre">{{problem.description}}</pre>
                </div>
            </div>
            <!-- v-model 能够做到双向绑定, 只要编辑框发生变化, 变量的值就改变了 -->
            <div class="my_code">
                <div id="editor" style="min-height:1160px;width:600px;margin-left: 10px">
                    <textarea style="width: 100%; height: 200px"></textarea>
                </div>
                <button type="button" class="btn-success" v-on:click="compile(problem.id)">提交运行</button>
            </div>
            <div style="clear: both"></div>
        </div>
    </section>
    <div style="clear: both"></div>
</div>

<!--footer-->
<div class="footermy">
    <h1 class="banquan">  &copy; 版权所有, 涉外攀枝花</h1>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="/NK_System/js/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ace.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ext-language_tools.js"></script>
<script>
    let count=0;
    var app = new Vue({
        // #app CSS 中的 id 选择器
        el: '#app',
        data: {
            status: 'list',  // 'list' 题目列表 'detail' 题目详情
            problems: [

            ],
            // 当前用户选中的题目
            problem: {
                // id: 1,
                // title: '两数之和',
                // level: '简单',
                // description: '这是题目要求',
                // templateCode: 'templateCode'
            },
        },
        methods: {
            getProblems() {
                // jquery 这个库发送 ajax 请求的方式
                $.ajax({
                    url: 'problem',
                    type: 'get',
                    // data http 响应的 body, status 就是状态码
                    success: function (data, status) {
                        app.problems =data;
                    }
                })
            },
            getProblemsUp() {
                // jquery 这个库发送 ajax 请求的方式
               let up=strartUp();
                $.ajax({
                    url: 'problem?strart=' + up,
                    type: 'get',
                    // data http 响应的 body, status 就是状态码
                    success: function (data, status) {
                        app.problems =data;
                    }
                })
            },

            getProblemsDown() {
                // jquery 这个库发送 ajax 请求的方式
                let down=strartDown();
                $.ajax({
                    url: 'problem?strart='+ down,
                    type: 'get',
                    // data http 响应的 body, status 就是状态码
                    success: function (data, status) {
                        app.problems =data;
                    }
                })
            },

            getProblem(problemId) {
                $.ajax({
                    url: 'problem?id=' + problemId,
                    type: 'get',
                    success: function (data, status) {
                        app.problem = data;
                        app.status = 'detail'; //实现的在线切换题目列表和题目详情
                        // 预期点击某个题目的时候, 就能把题目的代码模板设置进去templatecode
                        // editor.setValue(data.templateCode);
                        editor.setValue(data.templatecode);
                    }
                });
            },
            compile(problemId) {
                // 这个方法会在点击 提交 按钮的时候触发
                // 就会给服务器发送一个 ajax 请求
                var question = {
                    id: problemId,
                    // code 就是 textarea 里的代码
                    // editor.getValue() 就能获取到编辑框内部的代码
                    code: editor.getValue(),
                }
                $.ajax({
                    url: 'compile',
                    type: 'post',
                    contentType: 'application/json; charset=utf-8',
                    // data 属性放置请求的 body 内容
                    // JS 里把对象转成 JSON 字符串的方法
                    data: JSON.stringify(question),
                    success: function (data, status) {
                        // 把得到的响应结果直接通过对话框的形式来显示
                        var msg="";
                        if(data.errno==0){
                            var msg1="恭喜你答题成功！";
                            alert(msg1)
                        }else {
                            if (data.reason) {
                                msg += data.reason;
                            }
                            if (data.stdout) {
                                msg += data.stdout;
                            }
                            alert(msg);
                        }
                    }
                })
            }
        }
    });

   let app1=new Vue({
       el: '#app1',
       data:{
           user1:{

           }
       },
       methods: {

           getUser(){
               $.ajax({
                   url:'imge',
                   type:'get',
                   success:function (data,status) {
                       app1.user1=data;

                   }
               })

           }
       }

    });

    app.getProblems();
    app1.getUser();
    let strartUp=function upPage(){
        if(count==0){
            return 0;
        }else {
            return count--;
        }
    }
//Vue 语法 V-bind 是绑定属性的值 , v-on:click 是定义点击方法 v-show= 可以状态跳转

    let strartDown=function downPage(){
        if(count==0){
            count++
            return 1;
        }
        return count++;
    }






    // ace.js 的代码一定要放到 vue 的代码的后面.
    // 否则 ace.js 会受到 vue 的干扰就不生效了
    // 此处参数的 editor 就对应到上面的 <div id="editor">
    let editor = ace.edit("editor");
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });
    editor.setTheme("ace/theme/twilight");
    editor.session.setMode("ace/mode/java");
    editor.resize();
    document.getElementById('editor').style.fontSize = '20px';
</script>
</body>
</html>